<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3-escook</title>
  <link rel="stylesheet" href="./lib/style.css">
  <script type="importmap">
    {
      "imports" : {
        "vue": "./lib/vue-3.4.29.js"
      }
    }
  </script>
  <script type="module">
    import { createApp, reactive, nextTick } from 'vue'

    const app = createApp({
      setup() {
        // reactive 函数的返回值，是一个响应式的数据对象
        const state = reactive({ count: 0 })
        const add = async () => {
          state.count++
          console.log(state)

          // nextTick 可以帮我们把 fn 回调延迟执行，延迟到 DOM 更新完毕后再执行 fn 回调
          // 当我们更新了响应式状态之后，想立即操作最新的 DOM，那么就需要用到 nextTick()
          // nextTick(() => {
          //   console.log(document.querySelector('h1').textContent)
          // })

          await nextTick()
          console.log(document.querySelector('h1').textContent)
        }

        // 深层嵌套的复杂的响应式数据对象
        const obj = reactive({
          a: {
            b: {
              c: 1
            }
          }
        })

        return {
          state,
          add,
          obj
        }
      }
    })

    app.mount('#app')
  </script>
</head>

<body>
  <!-- 注意：被 Vue 控制的那个 DOM 元素，又叫做：模板 -->
  <div id="app">
    <h1>count 的值是：{{ state.count }}</h1>
    <button @click="add">+1</button>
    <hr>
    <p>obj.a.b.c 的值是: {{ obj.a.b.c }}</p>
    <button @click="obj.a.b.c++">+1</button>
  </div>
</body>

</html>